<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
    <ul class="ul">
        <li class="li">公告</li>
        <li>规则</li>
        <li>论坛</li>
        <li>安全</li>
        <li>公益</li>
    </ul>
    <div class="huadong">
        <div class="chuxian">
            <p><a href="">破解被抄难题 阿里原创保护计划向设计师开放</a></p>
            <a href="">身体护理在天猫升级</a>
            <a href="">德芙重回青春期</a>
        </div>
        <div>
            <a href="">新增《淘宝网汽配行业管理规范》公示通知</a>
            <a href="">《淘宝网区域零售服务说明》变更公示通知</a>
        </div>
        <div>
            <a href="">淘宝1212活动招商</a>
            <a href="">陌生人拼团上线</a>
            <a href="">中差评功能升级</a>
            <a href="">运营神器年中大促</a>
        </div>
        <div>
            <a href="">魔豆妈妈公益项目</a>
            <a href="">让母爱永不打烊！</a>
            <a href="">卖家注意：风险通报！</a>
            <a href="">售假获刑又起诉！</a>
        </div>
        <div>
            <a href="">淘宝公益平台正式更名</a>
            <a href="">益起来商家招募即将截止</a>
            <a href="">卖家如何设置公益宝贝</a>
            <a href="">公益机构开店全攻略</a>
        </div>
    </div>
</nav>
</body>
<script>
    var ul=document.querySelectorAll('.ul li');
    var div=document.querySelectorAll('.huadong div');

    for(i=0;i<ul.length;i++){
        ul[i].index=i;
        ul[i].onmouseover=function () {
            for(o=0;o<ul.length;o++){
                 ul[o].classList.remove('li');
                div[o].classList.remove('chuxian')
            }
            this.classList.add('li');
            div[this.index].classList.add('chuxian')
        }
    }
</script>
</html>